import React, { useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import OperpQuery from '@/components/OperpQuery';
import QuickMenu from '@/components/QuickMenu';
import { Button } from 'antd';
import { FormattedMessage } from 'umi';
import { ExecuteSQL } from '@/utils/ExecuteCmd';

export default (): React.ReactNode => {
  const [loading, setLoading] = useState<boolean>(false);
  return (
    <PageContainer title={false} breadcrumbRender={false} ghost>
      <OperpQuery
        sysReportName="ReportLogs"
        scroll={{ y: '500px' }}
        toolBarRender={[
          <Button
            type="ghost"
            danger
            loading={loading}
            onClick={async (e) => {
              setLoading(true);
              await ExecuteSQL('ClearLog');
              setLoading(false);
            }}
          >
            <FormattedMessage id="pages.clearLog" />
          </Button>,
          <QuickMenu path="/admin/syslog" icon="icon-todo_list" title="ReportLogs" />,
        ]}
      />
    </PageContainer>
  );
};
